<script setup lang="ts">
import { KeyType, keyDown } from "../script/Home"
</script>

<template>
  <div class="Home">
    <canvas id="ctx"></canvas>
    <div class="clioten d-flex justify-space-between">
      <div class="left d-flex justify-center align-center">
        <VIcon @click="keyDown(KeyType.up)">mdi mdi-arrow-up-bold-circle</VIcon>
        <VIcon @click="keyDown(KeyType.right)">mdi mdi-arrow-right-bold-circle</VIcon>
        <VIcon @click="keyDown(KeyType.left)">mdi mdi-arrow-left-bold-circle</VIcon>
        <VIcon @click="keyDown(KeyType.down)">mdi mdi-arrow-down-bold-circle</VIcon>
      </div>
      <div class="right d-flex justify-center align-center">
        <VIcon @click="keyDown(KeyType.A)">mdi mdi-alpha-a-circle</VIcon>
        <VIcon @click="keyDown(KeyType.B)">mdi mdi-alpha-b-circle</VIcon>
      </div>
    </div>
    <div class="start d-flex justify-center">
      <VIcon @click="keyDown(KeyType.select)">mdi mdi-play</VIcon>&nbsp;&nbsp;&nbsp;
      <VIcon @click="keyDown(KeyType.start)">mdi mdi-stop</VIcon>
    </div>
  </div>
</template>

<style scoped lang="less">
.Home {
  --color: rgba(255, 0, 0, 1);
  --wh: 40px;

  #ctx {
    width: 100vw;
    height: 75vw;
    background-color: black;
  }

  .clioten {
    padding: 20%;

    .left,
    .right {
      // background-color: var(--color);
      width: var(--wh);
      height: var(--wh);
      position: relative;

      i {
        --post: -110%;
        position: absolute;
        font-size: 50px;
        color: var(--color);
        box-shadow: inset 0px 0px 3px rgb(238, 130, 130);
        border: 0.1px groove rgb(238, 130, 130);
        border-radius: 50%;
      }

      i:active {
        border: none;
        color: rgb(218, 78, 78);
        box-shadow: inset 0px 0px 5px rgb(169, 153, 153);
        scale: 0.99;
      }

      i:nth-child(1) {
        top: var(--post);
      }

      i:nth-child(2) {
        right: var(--post);
      }

      i:nth-child(3) {
        left: var(--post);
      }

      i:nth-child(4) {
        bottom: var(--post);
      }
    }
  }

  .start {
    i {
      color: white;
      background: rgba(255, 0, 0, 1);
      padding: 0 20px;
    }

    i:active {
      scale: 0.95;
    }
  }

}
</style>
